<!-- eslint-disable vue/no-duplicate-attributes -->
<!-- eslint-disable vue/no-parsing-error -->
<template>
  <div
    :style="{
      height: '55px',
      lineHeight: '50px',
      textAlign: 'center',
      borderRight: '1px solid #E5E6EB',
      width: '100%',
    }"
  >
    <div>
      <div :class="[!appStore.isCollapse || alwaysShow ? 'show-title ' : 'close-title padd']">
        <div
          v-if="showLogo"
          class="logo-wrapper"
          :style="
            appStore.sideTheme == 'dark'
              ? 'background-color: black;'
              : appStore.layoutMode == 'lcr'
              ? 'background-color: #ffffff;'
              : 'background-color: #ffffff;'
          "
        >
          <img class="logo-img" :src="url" />
          <div
            v-if="name.length <= 9 && appStore.layoutMode === 'ltr'"
            style="font-size: 20px; margin-left: 10px"
            :style="appStore.sideTheme == 'dark' ? 'color: #fff;' : ''"
          >
            {{ name }}</div
          >
          <a-tooltip
            v-if="name.length > 7 && appStore.layoutMode === 'ltr'"
            :content="name"
            position="top"
          >
            <div
              v-if="name.length > 7 && appStore.layoutMode === 'ltr'"
              style="
                width: 150px;
                font-size: 20px;
                margin-left: 10px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
              "
              :style="appStore.sideTheme == 'dark' ? 'color: #fff;' : ''"
            >
              {{ name }}</div
            >
          </a-tooltip>
        </div>
      </div>

      <div
        v-if="showTitle"
        style="border-right: 1px solid rgba(229, 231, 225, 0.3); height: 55px; width: 142px"
        :style="{
          'background-color': bgColor,
        }"
      >
        <a-tooltip v-if="name.length > 7" :content="name" position="top">
          <div
            v-if="showTitle"
            :class="[!appStore.isCollapse || alwaysShow ? 'show-title' : 'close-title']"
            :style="
              appStore.sideTheme == 'dark'
                ? 'text-align: center; font-size:15px; height: 55px;padding:0 5px; padding-top:5px;color:#fff;box-sizing: border-box;width: 142px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;'
                : 'text-align: center; font-size:15px; height: 55px;padding:0 5px; padding-top:5px;color:#000;box-sizing: border-box;width: 142px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;'
            "
          >
            {{ name }}
          </div>
        </a-tooltip>
        <div
          v-else-if="showTitle && name.length <= 7"
          :class="[!appStore.isCollapse || alwaysShow ? 'show-title' : 'close-title']"
          :style="
            appStore.sideTheme == 'dark'
              ? 'text-align: center; font-size:15px; height: 55px;padding:0 5px; padding-top:5px;color:#fff;box-sizing: border-box;width: 142px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;'
              : 'text-align: center; font-size:15px; height: 55px;padding:0 5px; padding-top:5px;color:#000;box-sizing: border-box;width: 142px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;'
          "
        >
          {{ name }}
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
  import { computed, defineComponent, onMounted, ref, watch } from 'vue'
  import { projectName } from '../../setting'
  import sideTheme from '../../setting'
  import useAppConfigStore from '@/store/modules/app-config'
  import { SideTheme, ThemeMode } from '@/store/types'
  import router from '@/router'
  import { get } from '@/api/http'
  import { systemAdmin } from '@/api/url'
  import { settingget, userDetail } from '@/api/user'
  export default defineComponent({
    name: 'Logo',
    props: {
      showTitle: {
        type: Boolean,
        default: true,
      },
      showLogo: {
        type: Boolean,
        default: true,
      },
      alwaysShow: {
        type: Boolean,
        default: false,
      },
    },
    setup() {
      const appStore = useAppConfigStore()
      const Theme = ref({})
      const app: any = ref('')
      Theme.value = sideTheme
      const bgColor = computed(() => {
        if (appStore.layoutMode !== 'ttb') {
          if (appStore.sideTheme === SideTheme.DARK) {
            return 'var(--color-menu-dark-bg)'
          }
          if (appStore.sideTheme === SideTheme.WHITE) {
            return appStore.sideTheme === SideTheme.WHITE
              ? 'var(--color-white)'
              : appStore.sideTheme === SideTheme.DARK
              ? 'var(--color-menu-dark-bg)'
              : 'transparent'
          }
          return 'var(--color-white)'
        } else {
          return appStore.theme === ThemeMode.DARK
            ? 'var(--color-menu-dark-bg)'
            : 'var(--color-white)'
        }
      })
      const url = ref('')
      const name = ref('')
      //获取
      const systemAdminFn = () => {
        get({
          url: systemAdmin,
        }).then((res) => {
          if (res.data) {
            if (res.data.name) {
              name.value = res.data.name
            } else {
              name.value = projectName
            }
            if (res.data.logoImage) {
              url.value = res.data.logoImage
              document.querySelector('link[rel="icon"]')?.setAttribute('href', res.data.logoImage)
            } else {
              url.value = '/favicon.ico'
            }
          } else {
            url.value = '/favicon.ico'
            name.value = projectName
          }
        })
      }
      //获取
      const systemAdminFns = () => {
        get({
          url: settingget,
        }).then((res) => {
          if (res.data) {
            if (res.data.name) {
              name.value = res.data.name
              document.title = res.data.name
            } else {
              name.value = projectName
            }
            if (res.data.logoImage) {
              url.value = res.data.logoImage
              document.querySelector('link[rel="icon"]')?.setAttribute('href', res.data.logoImage)
            } else {
              get({
                url: systemAdmin,
              }).then((res) => {
                if (res.data) {
                  if (res.data.logoImage) {
                    url.value = res.data.logoImage
                    document
                      .querySelector('link[rel="icon"]')
                      ?.setAttribute('href', res.data.logoImage)
                  } else {
                    url.value = '/favicon.ico'
                  }
                } else {
                  url.value = '/favicon.ico'
                  name.value = projectName
                }
              })
            }
          } else {
            get({
              url: systemAdmin,
            }).then((res) => {
              if (res.data) {
                if (res.data.logoImage) {
                  url.value = res.data.logoImage
                  document
                    .querySelector('link[rel="icon"]')
                    ?.setAttribute('href', res.data.logoImage)
                } else {
                  url.value = '/favicon.ico'
                }
                if (res.data.name) {
                  name.value = res.data.name
                  document.title = res.data.name
                }
              } else {
                url.value = '/favicon.ico'
                name.value = projectName
                document.title = projectName
              }
            })
          }
        })
      }
      watch(
        () => router.currentRoute.value,
        (newValue: any) => {
          console.log(newValue, '头部展示标题')
          // if (newValue.matched.length > 0) {
          //   app.value = newValue.matched[0].name
          // } else {
          //   app.value = '暂无法获取'
          // }
        },
        { immediate: true }
      )
      onMounted(() => {
        if (window.location.pathname.split('/')[1] != 'children') {
          systemAdminFn()
        } else {
          get({
            url: userDetail,
            data: {},
          }).then((res) => {
            if (res.code == 0) {
              if (res.data.customLogo == true) {
                systemAdminFns()
              } else {
                systemAdminFn()
              }
            }
          })
        }
      })
      return {
        appStore,
        projectName,
        bgColor,
        app,
        systemAdminFn,
        systemAdminFns,
        url,
        name,
      }
    },
  })
</script>
<style lang="less" scoped>
  .bubble {
    position: relative; /* 设置为相对定位 */
  }

  .bubble::before {
    content: ''; /* 必须有内容才能显示伪元素 */
    position: absolute; /* 将伪元素放在原始元素之上 */
    top: -10px; /* 调整气泡与文本的距离 */
    left: 50%; /* 水平居中 */
    transform: translateX(-50%); /* 水平居中 */
    width: 200px; /* 根据需要调整气泡大小 */
    height: 80px; /* 根据需要调整气泡高度 */
    background-color: #f3f3f3; /* 气泡背景色 */
    border-radius: 4px; /* 添加边角圆形化 */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
    padding: 10px; /* 根据需要调整内部间距 */
  }
  .padd {
    padding: 15px;
  }
  .sidebar-bg-light {
    .logo-wrapper {
      height: 55px;
      display: flex;
      justify-content: center;
      align-items: center;
      color: var(--color-text-1);
    }
  }
  .logo-wrapper {
    height: 55px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--color-text-1);

    // border-right: 1px solid var(--color-border);

    .logo-img {
      width: 45px;
      height: 45px;
    }
    .logo-title {
      font-weight: bold;
    }
    .show-title {
      transform: scale(1);
      width: auto;
      height: 55px;
      line-height: 55px;
      transition: transform 0.2s ease-in;
    }
    .close-title {
      transform: scale(0);
      width: 0;
    }
    .white {
      background-color: white;
    }
    .aa {
      background-color: #3491fa;
    }
  }
</style>
